<template>
  <div class="search-result">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.art_id" :title="item.title" />
    </van-list>
  </div>
</template>

<script>
import { getSearch } from '@/api/search'
export default {
  name: 'SearchResult',
  components: {},
  props: {
    // 搜索关键字
    q:{
      type:String,
      required:true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page:1
    }
  },
  methods: {
    async onLoad () {
        try {
          // 1.发送数据请求
          let { data:res } = await getSearch({
            page:this.page,
            per_page:10,
            q:this.q  // 关键字
          })
           //  2.追加数据到列表
           this.list.push(...res.data.results)
          // 3.关闭加载
          this.loading = false
          // 4.判断是否结束
          if(res.data.results.length <10){
            this.finished = true
          }
          // 5.页码处理
          this.page++
        } catch (error) {
          this.$toast.fail('获取搜索结果失败')
        }
       
    }
  }
}
</script>

<style scoped lang="less"></style>